<template>
  <div
    class="HandoverDetailsItem"
    :style="data.transientStatus == '20' ? 'backgroundColor: red;' : ''"
  >
    <div class="title">
      <h1>发货单：{{ data.deliverCargoNo }}</h1>
    </div>
    <div class="HandoverDetailsItemCon">
      <van-row gutter="20">
        <van-col span="24">
          <div class="HandoverDetailsItemConItem">
            <h1>发货时间：</h1>
            <p>{{ data.deliverGoodsTime }}</p>
          </div>
        </van-col>
        <van-col span="12">
          <div class="HandoverDetailsItemConItem">
            <h1>发&nbsp; 货 &nbsp;人：</h1>
            <p>{{ data.deliveryUserName }}</p>
          </div>
        </van-col>
        <van-col span="12">
          <div class="HandoverDetailsItemConItem">
            <h1>装车服务：</h1>
            <p>{{ data.loadingService == 1 ? "是" : "否" }}</p>
          </div></van-col
        >
      </van-row>
      <van-row gutter="20">
        <van-col span="12">
          <div class="HandoverDetailsItemConItem">
            <h1>发货类型：</h1>
            <p>{{ data.deliverGoodsType | deliverGoodsTypeShow }}</p>
          </div>
        </van-col>
        <van-col span="12">
          <div class="HandoverDetailsItemConItem">
            <h1>发货件重：</h1>
            <p>{{ data.deliverGoodsNum }}pcs/{{ data.deliverGoodsWeight }}kg</p>
          </div>
        </van-col>
      </van-row>
      <van-row gutter="20">
        <van-col span="24">
          <div class="HandoverDetailsItemConItem">
            <h1>库&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;区：</h1>
            <p>{{ data.storageArea }}</p>
          </div>
        </van-col>
      </van-row>
      <div class="button" v-if="type == 1">
        <button @click="goWebPage(data.id)" type="button">发货</button>
      </div>
      <div class="button" v-else>
        <button type="button" @click="show = !show">
          {{ show ? "关闭详情" : "查看详情" }}
        </button>
      </div>
      <!-- 详情内容 -->
      <div v-show="show">
        <div
          v-for="(item, index) in data.deliverCargoWaybills"
          :key="index"
          class="ShipmentDetailItem"
        >
          <div class="title">
            <h1>{{ item.taskName }}</h1>
            <p>库区：{{ item.storageArea }}</p>
          </div>
          <div class="ShipmentDetailItemCon">
            <van-row>
              <van-col span="24">
                <div class="ShipmentDetailItemConItem">
                  <h1>主&nbsp; 单&nbsp; 号：</h1>
                  <p>
                    {{ item.masterWaybill }}
                    <span v-if="item.damageInfos.toString() != []"
                      >破/{{ item.damageInfos | changeDamageInfos }}</span
                    >
                  </p>
                </div>
              </van-col>
              <van-col span="24">
                <div class="ShipmentDetailItemConItem">
                  <h1>主单件重：</h1>
                  <p>{{ item.waybill.masterWaybillNum }}pcs/{{ item.waybill.masterWaybillGrossWeight }}kg</p>
                </div>
              </van-col>

              <van-col span="12">
                <div class="ShipmentDetailItemConItem">
                  <h1>应发件数：</h1>
                  <p>{{ item.consigneeNum }}pcs</p>
                </div>
              </van-col>
              <van-col span="12">
                <div class="ShipmentDetailItemConItem">
                  <h1>实发件数：</h1>
                  <p>{{ item.actualNum }}</p>
                </div>
              </van-col>

              <van-col span="24">
                <div class="ShipmentDetailItemConItem">
                  <h1>货物类型：</h1>
                  <p>{{ item.cargoType }}</p>
                </div>
              </van-col>
              <van-col span="24">
                <div class="ShipmentDetailItemConItem">
                  <h1>货&nbsp; &nbsp; &nbsp; &nbsp;位：</h1>
                  <p>{{ item.storageCargoLocation }}</p>
                </div>
              </van-col>

              <van-col span="24">
                <div class="ShipmentDetailItemConItem">
                  <h1>特&nbsp; 货 &nbsp;码：</h1>
                  <p>{{ item.specialCode }}</p>
                </div>
              </van-col>
            </van-row>
          </div>
          <div v-if="item.subDeliverCargoWaybills">
            <div
              class="ShipmentDetailItemConChildren"
              v-for="(item1, index) in item.subDeliverCargoWaybills"
              :key="index"
            >
              <div class="title">
                <h1>{{ item1.taskName }}</h1>
                <p>库区：{{ item1.storageArea }}</p>
              </div>
              <div>
                <van-row>
                  <van-col span="24">
                    <div class="ShipmentDetailItemConItem">
                      <h1>分&nbsp; 单 &nbsp;号：</h1>
                      <p>{{ item1.subWaybill }}</p>
                    </div>
                  </van-col>
                  <van-col span="24">
                    <div class="ShipmentDetailItemConItem">
                      <h1>分单件重：</h1>
                      <p>
                        {{ item1.consigneeNum }}pcs/{{
                          item1.consigneeWeight
                        }}kg
                      </p>
                    </div>
                  </van-col>
                </van-row>
                <van-row>
                  <van-col span="12">
                    <div class="ShipmentDetailItemConItem">
                      <h1>应发件数：</h1>
                      <p>{{ item1.consigneeNum }}pcs</p>
                    </div>
                  </van-col>
                  <van-col span="12">
                    <div class="ShipmentDetailItemConItem">
                      <h1>实发件数：</h1>
                      <p>{{ item1.actualNum }}</p>
                    </div>
                  </van-col>

                  <van-col span="24">
                    <div class="ShipmentDetailItemConItem">
                      <h1>货&nbsp; &nbsp; &nbsp; &nbsp;位：</h1>
                      <p>{{ item1.storageCargoLocation }}</p>
                    </div>
                  </van-col>
                </van-row>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 结束 -->
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Col, Row } from "vant";

Vue.use(Col);
Vue.use(Row);
import { getLocalhostUrl } from "@/utils/common";
import ShipmentDetailItem from "@/components/ShipmentDetailItem";
export default {
  props: ["data", "type"],
  data() {
    return {
      show: false,
    };
  },
  methods: {
    // 打开新页面
    goWebPage(id) {
      try {
        window.appPlat.goWebPage(getLocalhostUrl() + `/shipmentDetail/${id}`);
      } catch (e) {
        this.$router.push(`/shipmentDetail/${id}`);
      }
    },
  },
  filters: {
    deliverGoodsTypeShow(e) {
      if (e == 1) {
        return "发货出库";
      } else if (e == 2) {
        return "查验出库";
      } else if (e == 3) {
        return "整板出库";
      } else if (e == 4) {
        return "速提出库";
      } else {
        return "";
      }
    },
    changeDamageInfos(e) {
      let num = 0;
      if (e && e.length > 0) {
        e.map((item) => {
          num += item.damageNum;
        });
      }
      return num;
    },
  },
  components: {
    ShipmentDetailItem,
  },
};
</script>

<style lang="scss" scoped>
.HandoverDetailsItem {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  border-radius: 5px;
  margin-top: 10px;

  .title {
    width: 100%;
    padding-bottom: 10px;
    border-bottom: 2px dotted #b4b7c9;

    h1 {
      font-size: 16px;
      font-weight: 400;
      color: #333333;
      line-height: 20px;
    }

    p {
      font-weight: 400;
      font-size: 16px;
      font-weight: 400;
      color: #8c9ba5;
      line-height: 20px;
      padding: 0 3px;
    }
  }

  .HandoverDetailsItemCon {
    width: 100%;
    padding-top: 15px;
    box-sizing: border-box;

    .HandoverDetailsItemConItem {
      width: 100%;
      display: flex;

      & > h1 {
        width: 85px;
        font-size: 16px;
        font-weight: 400;
        color: #999999;
        line-height: 30px;
        //overflow: hidden;
        //white-space: nowrap;
        text-overflow: ellipsis;
      }

      & > p {
        flex: 1;
        font-size: 16px;
        font-weight: 400;
        color: #333;
        line-height: 30px;
        //overflow: hidden;
        //white-space: nowrap;
        text-overflow: ellipsis;

        span {
          color: #f29d12;
        }
      }
    }
  }
}

.button {
  width: 100%;
  margin-top: 10px;
  text-align: right;

  button {
    width: 90px;
    border-radius: 15px;
    border: 2px solid #f39c12;
    font-size: 16px;
    font-weight: 500;
    color: #f39c12;
    line-height: 30px;
    background-color: #fff;
  }
}
</style>
<style lang="scss" scoped>
.ShipmentDetailItem {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  border-bottom: 2px solid #f5f5f5;

  .title {
    width: 100%;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    border-bottom: 2px dotted #b4b7c9;

    & > h1 {
      display: inline;
      font-size: 16px;
      font-weight: 500;
      color: #ffffff;
      line-height: 20px;
      padding: 0 3px;
      background-color: #3a535b;
      //white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    & > p {
      font-weight: 400;
      background-color: rgba(153, 153, 153, 0.1);
      font-size: 16px;
      font-weight: 400;
      color: #8c9ba5;
      line-height: 20px;
      padding: 0 3px;
    }
  }

  .ShipmentDetailItemCon {
    width: 100%;
    padding-top: 15px;
    box-sizing: border-box;

    .ShipmentDetailItemConItem {
      width: 100%;
      display: flex;

      & > h1 {
        width: 85px;
        font-size: 16px;
        font-weight: 400;
        color: #999999;
        line-height: 30px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      & > p {
        flex: 1;
        font-size: 16px;
        font-weight: 400;
        color: #333;
        line-height: 30px;
        // white-space: nowrap;
        // overflow: hidden;
        // text-overflow: ellipsis;
        span {
          color: #d91010;
        }
      }
    }
  }

  .ShipmentDetailItemConChildren {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    background-color: #eaedf0;
    margin-bottom: 10px;

    .ShipmentDetailItemConItem {
      width: 100%;
      display: flex;

      & > h1 {
        width: 75px;
        font-size: 14px;
        font-weight: 400;
        color: #999999;
        line-height: 30px;
        //white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      & > p {
        flex: 1;
        font-size: 14px;
        font-weight: 400;
        color: #333;
        line-height: 30px;
        // white-space: nowrap;
        // overflow: hidden;
        // text-overflow: ellipsis;
      }
    }
  }

  .Stepper {
    padding: 4px 0;
    box-sizing: border-box;
    /deep/.van-stepper__plus {
      color: #999999 !important;
      background-color: #fff !important;
      border: 2px solid #999999 !important;
    }
    /deep/.van-stepper__minus {
      color: #fff;
      background-color: #f29d12;
      border: 2px solid #f29d12;
    }
    /deep/.van-stepper__input {
      width: 30px;
    }
  }
}
</style>
